<template>
  <div class="router-view">
    <div class="product-list-header" ref="listheader">
      <category-header></category-header>
      <section class="select-menu">
        <div
          :class="['select-item', { active: orderBy === 'default' }]"
          @click="handDefault"
        >
          默认排序
        </div>
        <div
          :class="['select-item', { active: orderBy === 'price_asc' }]"
          @click="handPriceAsc"
        >
          升序
          <i class="iconfont icon-up1"></i>
        </div>
        <div
          :class="['select-item', { active: orderBy === 'price_desc' }]"
          @click="handPriceDesc"
        >
          降序
          <i class="iconfont icon-down1"></i>
        </div>
        <div class="select-item">
          筛选
          <i class="iconfont iconfont-shaixuan"></i>
        </div>
      </section>
    </div>
    <section class="product-list">
      <div class="product-container">
        <!-- 顶部刷新 -->
        <van-pull-refresh
          ref="vanlist"
          v-model="isLoading"
          @refresh="onRefresh"
        >
          <!-- 底部加载 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-card
              v-for="item in productlist"
              :key="item.id"
              :num="item.stock"
              :price="item.price"
              :origin-price="item.originalPrice"
              :desc="item.subtitle"
              :title="item.name"
              :thumb="item.imageHost + item.mainImage"
              @click="pushDetail(item)"
            />
          </van-list>
        </van-pull-refresh>
      </div>
    </section>
    <!-- <section class="product-list">
      <div class="product-container">
        <div
          class="van-card"
          v-for="(item, index) in productlist"
          :key="index"
          @click="goDetail(item.id)"
        >
          <div class="van-card-thumb">
            <img :src="item.imageHost + item.mainImage" alt="" />
          </div>
          <div class="van-card-content">
            <div class="content-top">
              <p>{{ item.name }}</p>
              <p>{{ item.subtitle }}</p>
            </div>
            <div class="content-bottom">
              <div class="content-price">
                <span>¥</span>
                <span>{{ item.price }}</span>
              </div>
              <div class="content-original-price">
                <span>¥</span>
                <span>{{ item.originalPrice }}</span>
              </div>
              <div class="content-num">
                <span>x</span>
                <span>{{ item.stock }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->
  </div>
</template>

<script>
import { getProductList } from "../../api/api";
import categoryHeader from "../../components/categoryHeader.vue";
export default {
  data() {
    return {
      productlist: [],
      orderBy: "default",
      pageSize: 10,
      pageNum: 1,
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  methods: {
    // 列表点击事件
    pushDetail(item) {
      this.$router.push({
        name: "Detail",
        params: { id: item.id },
      });
    },
    getProductData(params) {
      getProductList(params, (res) => {
        // console.log(res);
        this.loading = false;
        if (res.data.list.length !== this.pageSize) {
          this.finished = true;
        }
        // this.productlist = res.data.list;

        // 顶部刷新赋值新数据
        if (this.isLoading) {
          this.productlist = res.data.list;
          this.isLoading = false;
          this.finished = false; // 允许上拉加载
        } else {
          // 底部加载更多 合并数据
          this.productlist = this.productlist.concat(res.data.list);
        }
      });
    },
    // 默认
    handDefault() {
      if (this.orderBy === "default") {
        return;
      }
      this.orderBy = "default";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    // 升序
    handPriceAsc() {
      this.orderBy = "price_asc";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    // 降序
    handPriceDesc() {
      this.orderBy = "price_desc";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    // 底部刷新
    onLoad() {
      this.loading = true;
      console.log("底部拉了一下");
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
      });
    },
    // 顶部加载
    onRefresh() {
      this.isLoading = true;
      this.pageNum = 1;
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
      });
    },
  },
  components: { categoryHeader },
  created() {},
  mounted() {
    // 在下次`dom`更新循环结束之后执行延迟回调，可用于获取更新后的`dom`状态
    this.$nextTick(() => {
      // window.screen.height 屏幕高度
      // this.$refs.listheader.clientHeight 头部高度
      // this.$refs.vanlist 组件对象
      // this.$refs.vanlist.$el 标签元素对象

      this.$refs.vanlist.$el.style.height =
        window.screen.height - this.$refs.listheader.clientHeight - 50 + "px";

      // 触发下拉刷新 初次加载  触发顶部加载 获取数据
      this.onRefresh();
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin.scss";
.product-list-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
}

.select-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 72px;
  border: 1px 0 solid #ccc;

  .select-item {
    flex: 1;
    text-align: center;
    font-size: 21px;
    line-height: 90px;

    &.active {
      color: $red;
    }

    .iconfont {
      &.icon-down1 {
        color: #999;
        padding-left: 10px;
        font-size: 22px;
      }

      &.icon-up1 {
        @extend .icon-down1;
        font-size: 34px;
      }

      &.iconfont-shaixuan {
        @extend .icon-down1;
        font-size: 28px;
      }
    }
  }
}

.product-list {
  width: 100%;
  .product-container {
    position: absolute;
    left: 0;
    top: 170px;
    width: 100%;
    overflow-y: scroll;
    height: auto;
    padding: 5px 10px;
    box-sizing: border-box;

    .van-pull-refresh {
      overflow-y: scroll;
    }
  }
}

// .product-list {
//   width: 100%;

//   .product-container {
//     position: absolute;
//     left: 0;
//     top: 155px;
//     width: 100%;

//     .van-card {
//       display: flex;
//       height: 88px;
//       box-sizing: border-box;
//       background-color: #fafafa;
//       margin-top: 10px;

//       .van-card-thumb {
//         width: 20%;
//         text-align: center;

//         img {
//           width: 88px;
//           height: 88px;
//         }
//       }

//       .van-card-content {
//         display: flex;
//         flex-direction: column;
//         justify-content: space-between;
//         width: 80%;

//         .content-top {
//           margin-top: 10px;
//           height: 40px;
//           font-size: 14px;
//           line-height: 20px;

//           p:nth-child(1),
//           p:nth-child(2) {
//             width: 500px;
//             text-overflow: ellipsis;
//             white-space: nowrap;
//             height: 20px;
//             overflow: hidden;
//           }
//         }

//         .content-bottom {
//           display: flex;
//           align-items: center;
//           height: 30px;
//           font-size: 14px;
//           justify-content: space-between;

//           .content-original-price {
//             width: 70%;
//             text-decoration: line-through;
//             font-size: 13px;
//             color: #ccc;
//           }

//           .content-num {
//             width: 20%;
//           }
//         }
//       }
//     }
//   }
// }
</style>